{{! Contact form (ADR 0034): the Contact section's form as an element for any column, with its markup, look and script (requires contact). The server finds it by page id and node id and takes its settings from the saved page (ADR 0022). A form made with another plugin is drawn by that plugin inside .sv-external-form (ADR 0129). }}
<div {{@attrs}}>{{#formView.external}}<div class="sv-external-form sv-external-form--{{plugin}}{{#site}} sv-external-form--site{{#fieldStyle}} sv-external-form--{{fieldStyle}}{{/fieldStyle}} sv-button sv-button--variant-{{buttonVariant}}{{/site}}">{{@externalform}}</div>{{/formView.external}}{{^formView.external}}<form class="sv-contact__form{{#fieldStyle}} sv-contact__form--{{fieldStyle}}{{/fieldStyle}}{{#fieldIcons}} sv-contact__form--icons{{/fieldIcons}}" method="post" action="{{formAction}}"{{#formView.files}} enctype="multipart/form-data"{{/formView.files}} data-sv-contact data-sending="{{contactSending}}" data-failed="{{contactFailed}}"{{#formView.dates}} data-calendar="{{dateInput.calendar}}" data-numerals="{{dateInput.numerals}}" data-months="{{dateInput.months}}"{{/formView.dates}}><input type="hidden" name="action" value="sitevari_contact"><input type="hidden" name="sv_page" value="{{pageId}}"><input type="hidden" name="sv_form" value="{{@id}}"><input type="hidden" name="sv_elapsed" value=""><div class="sv-contact__fields">{{#formView.fields}}<div class="sv-contact__field{{#half}} sv-contact__field--half{{/half}}{{#isConsent}} sv-contact__field--consent{{/isConsent}}" data-sv-field="{{id}}">{{#isInput}}<label class="sv-contact__label" for="{{@id}}-{{id}}"><span>{{label}}</span>{{#required}}<span class="sv-contact__required" aria-hidden="true">*</span>{{/required}}</label>{{#fieldIcons}}{{#iconUser}}<svg class="sv-contact__fieldicon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>{{/iconUser}}{{#iconMail}}<svg class="sv-contact__fieldicon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>{{/iconMail}}{{#iconPhone}}<svg class="sv-contact__fieldicon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/></svg>{{/iconPhone}}{{#iconTag}}<svg class="sv-contact__fieldicon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r="1"/></svg>{{/iconTag}}{{#iconMessage}}<svg class="sv-contact__fieldicon sv-contact__fieldicon--top" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>{{/iconMessage}}{{#iconList}}<svg class="sv-contact__fieldicon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 6h.01"/><path d="M3 12h.01"/><path d="M3 18h.01"/><path d="M8 6h13"/><path d="M8 12h13"/><path d="M8 18h13"/></svg>{{/iconList}}{{#iconCalendar}}<svg class="sv-contact__fieldicon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8 2v4"/><path d="M16 2v4"/><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 10h18"/></svg>{{/iconCalendar}}{{#iconClock}}<svg class="sv-contact__fieldicon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>{{/iconClock}}{{/fieldIcons}}<input class="sv-contact__input" id="{{@id}}-{{id}}" name="{{name}}" type="{{inputType}}"{{#ltr}} dir="ltr"{{/ltr}}{{#inputmode}} inputmode="{{inputmode}}"{{/inputmode}}{{#autocomplete}} autocomplete="{{autocomplete}}"{{/autocomplete}}{{#maxlength}} maxlength="{{maxlength}}"{{/maxlength}}{{#future}} data-sv-future{{/future}}{{#placeholder}} placeholder="{{placeholder}}"{{/placeholder}}{{#required}} required{{/required}}>{{/isInput}}{{#isTextarea}}<label class="sv-contact__label" for="{{@id}}-{{id}}"><span>{{label}}</span>{{#required}}<span class="sv-contact__required" aria-hidden="true">*</span>{{/required}}</label>{{#fieldIcons}}{{#iconUser}}<svg class="sv-contact__fieldicon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>{{/iconUser}}{{#iconMail}}<svg class="sv-contact__fieldicon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>{{/iconMail}}{{#iconPhone}}<svg class="sv-contact__fieldicon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/></svg>{{/iconPhone}}{{#iconTag}}<svg class="sv-contact__fieldicon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r="1"/></svg>{{/iconTag}}{{#iconMessage}}<svg class="sv-contact__fieldicon sv-contact__fieldicon--top" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>{{/iconMessage}}{{#iconList}}<svg class="sv-contact__fieldicon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 6h.01"/><path d="M3 12h.01"/><path d="M3 18h.01"/><path d="M8 6h13"/><path d="M8 12h13"/><path d="M8 18h13"/></svg>{{/iconList}}{{#iconCalendar}}<svg class="sv-contact__fieldicon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8 2v4"/><path d="M16 2v4"/><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 10h18"/></svg>{{/iconCalendar}}{{#iconClock}}<svg class="sv-contact__fieldicon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>{{/iconClock}}{{/fieldIcons}}<textarea class="sv-contact__input sv-contact__input--message" id="{{@id}}-{{id}}" name="{{name}}" rows="5" maxlength="{{maxlength}}"{{#placeholder}} placeholder="{{placeholder}}"{{/placeholder}}{{#required}} required{{/required}}></textarea>{{/isTextarea}}{{#isSelect}}<label class="sv-contact__label" for="{{@id}}-{{id}}"><span>{{label}}</span>{{#required}}<span class="sv-contact__required" aria-hidden="true">*</span>{{/required}}</label>{{#fieldIcons}}{{#iconUser}}<svg class="sv-contact__fieldicon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>{{/iconUser}}{{#iconMail}}<svg class="sv-contact__fieldicon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>{{/iconMail}}{{#iconPhone}}<svg class="sv-contact__fieldicon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/></svg>{{/iconPhone}}{{#iconTag}}<svg class="sv-contact__fieldicon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r="1"/></svg>{{/iconTag}}{{#iconMessage}}<svg class="sv-contact__fieldicon sv-contact__fieldicon--top" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>{{/iconMessage}}{{#iconList}}<svg class="sv-contact__fieldicon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 6h.01"/><path d="M3 12h.01"/><path d="M3 18h.01"/><path d="M8 6h13"/><path d="M8 12h13"/><path d="M8 18h13"/></svg>{{/iconList}}{{#iconCalendar}}<svg class="sv-contact__fieldicon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8 2v4"/><path d="M16 2v4"/><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 10h18"/></svg>{{/iconCalendar}}{{#iconClock}}<svg class="sv-contact__fieldicon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>{{/iconClock}}{{/fieldIcons}}<select class="sv-contact__input sv-contact__input--select" id="{{@id}}-{{id}}" name="{{name}}"{{#required}} required{{/required}}><option value="">{{placeholder}}</option>{{#options}}<option value="{{id}}">{{label}}</option>{{/options}}</select>{{/isSelect}}{{#isRadio}}<fieldset class="sv-contact__choices"><legend class="sv-contact__label"><span>{{label}}</span>{{#required}}<span class="sv-contact__required" aria-hidden="true">*</span>{{/required}}</legend>{{#options}}<label class="sv-contact__choice"><input type="radio" id="{{@id}}-{{field}}-{{id}}" name="{{name}}" value="{{id}}"{{#required}} required{{/required}}><span>{{label}}</span></label>{{/options}}</fieldset>{{/isRadio}}{{#isCheckboxes}}<fieldset class="sv-contact__choices"><legend class="sv-contact__label"><span>{{label}}</span>{{#required}}<span class="sv-contact__required" aria-hidden="true">*</span>{{/required}}</legend>{{#options}}<label class="sv-contact__choice"><input type="checkbox" id="{{@id}}-{{field}}-{{id}}" name="{{name}}" value="{{id}}"><span>{{label}}</span></label>{{/options}}</fieldset>{{/isCheckboxes}}{{#isConsent}}<label class="sv-contact__choice sv-contact__consent"><input type="checkbox" id="{{@id}}-{{id}}" name="{{name}}" value="1"{{#required}} required{{/required}}><span>{{consentBefore}}{{#link}}<a href="{{link}}"{{#newTab}} target="_blank" rel="noopener"{{/newTab}}>{{consentLinked}}</a>{{/link}}{{^link}}{{consentLinked}}{{/link}}{{consentAfter}}{{#required}}<span class="sv-contact__required" aria-hidden="true">*</span>{{/required}}</span></label>{{/isConsent}}{{#isFile}}<label class="sv-contact__label" for="{{@id}}-{{id}}"><span>{{label}}</span>{{#required}}<span class="sv-contact__required" aria-hidden="true">*</span>{{/required}}</label><input class="sv-contact__file" id="{{@id}}-{{id}}" name="{{name}}" type="file" accept="{{accept}}"{{#multiple}} multiple{{/multiple}} data-max-size="{{maxSize}}"{{#required}} required{{/required}}><p class="sv-contact__hint" dir="ltr">{{fileTypes}} · {{maxSize}} MB</p>{{/isFile}}</div>{{/formView.fields}}</div><div class="sv-contact__trap" aria-hidden="true"><label for="{{@id}}-website">Website</label><input id="{{@id}}-website" name="sv_website" type="text" tabindex="-1" autocomplete="off"></div><p class="sv-contact__status" role="status" aria-live="polite"></p><div class="sv-button sv-button--variant-{{buttonVariant}} sv-button--size-lg sv-contact__submit"><button class="sv-button__control{{#arrow}} sv-button__control--arrow{{/arrow}}{{#submitIcon}} sv-button__control--icon{{#submitIconEnd}} sv-button__control--icon-end{{/submitIconEnd}} sv-glyph-{{submitIcon}}{{/submitIcon}}" type="submit"><span>{{formView.button}}</span></button></div></form><div class="sv-contact__note sv-contact__note--sent" id="sv-sent-{{@id}}" tabindex="-1"><p>{{formView.thanks}}</p></div><div class="sv-contact__note sv-contact__note--failed" id="sv-failed-{{@id}}" tabindex="-1"><p>{{contactFailed}}</p></div>{{/formView.external}}</div>